<template>
  <view class="my">
    <view class="user_base">
      <view class="left">
        <image :src="userInfo.avatar || '../../static/icon/banner.png'" />
        <text>{{ userInfo.nickName || '微信用户' }}</text>
      </view>
      <view class="right" @click="goUserInfo">
        <text>去完善信息</text>
        <image src="../../static/icon/right.png"></image>
      </view>
    </view>

    <view class="links">
      <u-cell-group>
        <u-cell :border="false" isLink title="我的房屋" url="/pkg-house/house/house">
          <image class="left-icon" slot="icon" src="../../static/icon/myhouse.png" />
        </u-cell>
        <u-cell :border="false" isLink title="我的报修" url="/pkg-reply/my-repair/my-repair">
          <image class="left-icon" slot="icon" src="../../static/icon/myrepair.png" />
        </u-cell>
        <u-cell :border="false" isLink title="访客记录">
          <image class="left-icon" slot="icon" src="../../static/icon/myfriends.png" />
        </u-cell>
      </u-cell-group>
    </view>

    <u-button type="primary" text="退出账号" @click="logout"></u-button>

    <!-- 退出确认模态框 -->
    <!-- <u-modal showCancelButton :show="show" title="享+生活" content='是否确认退出账号？' @cancel="onCancel" @confirm="onConfirm">
		</u-modal> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo
      }
    },
    methods: {
      logout() {
        // this.show = true
        uni.showModal({
          title: '享+生活',
          content: '确认退出账号？',
          confirmText: '退出',
          success: (res) => {
            if (res.confirm) {
              this.$store.commit('user/setUserToken', null)
              uni.removeStorageSync('userToken')
              uni.navigateTo({
                url: "/pages/login/login"
              })
            }
          }
        })
      },
      onLoad() {
        this.$store.dispatch('user/loadUserInfo')
      },
      goUserInfo() {
        uni.navigateTo({
          url: "/pages/userInfo/userInfo"
        })
      }
      // onCancel() {
      // 	// this.show = false
      // },
      // onConfirm() {
      // 	this.$store.commit('user/setUserToken', null)
      // 	uni.removeStorageSync('userToken')
      // 	this.show = false
      // 	uni.redirectTo({
      // 		url: "/pages/login/login"
      // 	})
      // }
    }
  }
</script>

<style lang="scss" scoped>
  .my {
    height: 100%;
    background-color: #FAFAFA;

    .user_base {
      width: 750rpx;
      height: 482rpx;
      padding: 128rpx 40rpx 0px 40rpx;
      border-radius: 0px 0px 60px 60px;
      background: #6394C0;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;

      .left {
        height: 80rpx;
        display: flex;
        align-items: center;

        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }

        text {
          color: #fff;
          font-size: 40rpx;
          margin-left: 20rpx;
        }
      }

      .right {
        height: 80rpx;
        display: flex;
        align-items: center;

        text {
          color: #fff;
          font-size: 28rpx;
          margin-right: 10rpx;
        }

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .links {
      width: 670rpx;
      height: 306rpx;
      background-color: #fff;
      border-radius: 16rpx;
      margin: 0 auto;
      margin-top: -136rpx;

      ::v-deep .u-cell__body {
        padding: 0 25rpx;
        height: 102rpx;

        .u-cell__title-text {
          color: #3C3E42 !important;
          font-size: 28rpx !important;
        }
      }

      .left-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 25rpx;
      }
    }

    ::v-deep .u-button {
      width: 670rpx;
      margin: 25rpx auto;
      background-color: #6394C0;
      border: none;
    }
  }
</style>
